<template>
    <div class="category-detail-page">
        <el-card shadow="never">
            <el-form
                :model="form"
                label-position="right"
                label-suffix=":"
                label-width="150px">
                <el-form-item label="企业名称" prop="name">
                    {{ form.name }}
                </el-form-item>
                <el-form-item label="企业账号" prop="account">
                    {{ form.account }}
                </el-form-item>
                <el-form-item label="企业所在城市">
                    {{ form.city }}
                </el-form-item>
                <el-form-item label="企业规模人数">
                    {{ form.member_amount }}
                </el-form-item>
                <el-form-item label="企业所属行业">
                    {{ form.industry_id | industryFilter(industryOptions) }}
                </el-form-item>
                <el-form-item label="企业简介">
                    {{ form.introduction }}
                </el-form-item>
                <el-form-item label="联系人姓名">
                    {{ form.contact_name }}
                </el-form-item>
                <el-form-item label="联系方式">
                    {{ form.contact }}
                </el-form-item>
                <el-form-item label="msup备注信息">
                    {{ form.note }}
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>

export default {
    data() {
        return {
            form: {
                name: '',
                account: '',
                city: '',
                industry_id: '',
                member_amount: '',
                contact_name: '',
                contact: '',
                introduction: '',
                note: '',
            },
            id: this.$route.params.id,
            industryOptions: [],
        };
    },
    filters: {
        industryFilter: function (value, industryOptions) {
            if (!value) return '';
            const industry = industryOptions.filter(item => item.id === value)[0];
            return industry ? industry.name : '';
        },
    },
    methods: {
        fetchData() {
            if (this.id) {
                API.get(`company/${this.id}`).then((res) => {
                    for (const i of Object.keys(this.form)) {
                        if (res[i]) this.form[i] = res[i];
                    }
                });
            }
        },
        fetchIndustryData() {
            API.get('industry/list').then((res) => {
                this.industryOptions = res;
            });
        },
    },
    mounted() {
        this.fetchData();
        this.fetchIndustryData();
    },
};
</script>

<style lang="scss">
.category-detail-page {
    .input-width {
        width: 300px;
    }
    .picture {
        width: 200px;
        height: 200px;
        line-height: 200px;
    }
    .uploader-icon {
        font-size: 20px;
        color: #8c939d;
        text-align: center;
    }
    .image-uploader {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
}
</style>
